<template>
    <div id="line" style="width:100%;height:300px;"></div>
</template>
<script>
import resize from '@/utils/resize'
export default {
    mixins:[resize],
    data(){
        return {
            chart:null
        }
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    props:{
        infoMoveData:{
            type: Array,
		    default: () => []
        }
    },
    watch:{
        infoMoveData(val){
            this.renderInfoMove()
        }
    },
    mounted(){
    },  
    methods:{
        renderInfoMove() {
            this.chart = this.$echarts.init(document.getElementById('line'));
            let _ipcNumber = this.ipcNumber
            let xAxisData = [], yAxisData = []
            for(let i=0;i<this.infoMoveData.length;i++){
                xAxisData.push(this.infoMoveData[i].key_as_string)
                yAxisData.push(this.infoMoveData[i].doc_count)
            }
            /* if(yAxisData.length>0){
                this.isHaveChartNewsOne = true
            }else{
                this.isHaveChartNewsOne = false
            } */
            this.chart.setOption({
                title: {
                    x: '20px',
                    y: '5%',
                    textStyle:{
                        fontSize: 14,
                        color: '#505058',
                        fontWeight: 'bold' 
                    }
                },
                tooltip: { 
                     
                },
                legend:{
                    show: false,
                    icon: "roundRect",
                    left:160,
                    top:20
                },
                grid: {
                    left: '60',
                    right: '60',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: [
                    {
                        data: xAxisData,
                        type: 'category',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        boundaryGap: false,
                        axisLabel:{
                            color: '#888797'
                        },
                        splitLine:{
                            show:true,
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: false
                        }
                    },{
                        type: 'category',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        axisLabel:{
                            color: '#888797'
                        },
                        splitLine:{
                            show:true,
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        axisLabel:{
                            color: '#888797'
                        },
                        splitLine:{
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        axisLine:{
                            lineStyle:{
                            color: '#e7e8ec'
                            }
                        },
                        axisLabel:{
                            show:false,
                            color: '#888797'
                        },
                        splitLine:{
                            show:false,
                            lineStyle :{
                                type: 'dashed'
                            }
                        },
                        splitArea: {
                            show: false 
                        },
                        axisTick:{
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        name:'专利数量',
                        color:'#504da5',
                        data: yAxisData ,
                        type: 'line',
                        symbol:'none',
                        smooth: false
                    }
                    
                ]
            })
        },
    }
}
</script>